<template>
  <div class="RoleAdd">
    <a-card>
      <a-form :form="form">
        <a-form-item label="角色信息" :colon="false" :label-col="{ span: 2 }" :wrapper-col="{ span: 8}"></a-form-item>
        <a-form-item label="角色名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 8}" help="不超过16个字">
          <a-input
            placeholder="请输入"
            v-decorator="[
          'roleName',
          {rules: [{ required: true, message: '请输入角色名称!' }]}
        ]"
          />
        </a-form-item>
        <a-form-item label="启用状态" :label-col="{ span: 3 }" :wrapper-col="{ span: 8}">
          <a-switch
            v-decorator="['status', { valuePropName: 'checked',initialValue:true }]"
            checkedChildren="开"
            unCheckedChildren="关"
          />
        </a-form-item>
        <a-form-item label="权限设置" :label-col="{ span: 3 }" :wrapper-col="{ span: 8}">
          <a-checkbox v-decorator="['authorization']">全选</a-checkbox>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminate"
          @change="onCheckAllChange"
          :checked="checkAll"
        >订单管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group
        class="checkGroup"
        :options="orderOneOptions"
        v-model="checkedList"
        @change="onChange"
      />
      <!-- <a-row style="width:30%">
          <a-col :span="8">
            <a-checkbox class="checkboxTitel"/>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="1">查看</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="2">导出</a-checkbox>
          </a-col>
        </a-row>
        <a-row style="margin-top:2%;width:40%">
          <a-col :span="6">
            <a-checkbox value="0" class="checkboxTitel">销售订单</a-checkbox>
          </a-col>
          <a-col :span="6">
            <a-checkbox value="1">查看</a-checkbox>
          </a-col>
          <a-col :span="6">
            <a-checkbox value="2">导出</a-checkbox>
          </a-col>
          <a-col :span="6">
            <a-checkbox value="3">再次退款</a-checkbox>
          </a-col>
        </a-row>
        <a-row style="margin-top:2%;width:40%">
          <a-col :span="6">
            <a-checkbox value="0">异常订单</a-checkbox>
          </a-col>
          <a-col :span="6">
            <a-checkbox value="1">查看</a-checkbox>
          </a-col>
          <a-col :span="6">
            <a-checkbox value="2">导出</a-checkbox>
          </a-col>
      </a-row>-->
      <!-- </a-checkbox-group> -->
    </a-card>

    <!-- <a-card style="margin-top:2%">
      <template slot="title">
        <a-checkbox
          class="checkTitle"
          :indeterminate="indeterminate"
          @change="onCheckAllChange"
          :checked="checkAll"
        >商品管理</a-checkbox>
        <span class="hint">模块的所有功能未开启时，角色操作界面中不显示此模块</span>
      </template>
      <a-checkbox-group class="checkGroup" v-model="checkedList" @change="onChange">
        <a-row style="width:80%">
          <a-col :span="3">
            <a-checkbox value="0" class="checkboxTitel">总商品库</a-checkbox>
          </a-col>
          <a-col :span="3">
            <a-checkbox value="1">查看</a-checkbox>
          </a-col>
          <a-col :span="3">
            <a-checkbox value="2">导出</a-checkbox>
          </a-col>
          <a-col :span="3">
            <a-checkbox value="3">新增</a-checkbox>
          </a-col>
          <a-col :span="3">
            <a-checkbox value="4">编辑</a-checkbox>
          </a-col>
          <a-col :span="3">
            <a-checkbox value="5">删除</a-checkbox>
          </a-col>
          <a-col :span="3">
            <a-checkbox value="6">上架</a-checkbox>
          </a-col>
          <a-col :span="3">
            <a-checkbox value="7">下架</a-checkbox>
          </a-col>
        </a-row>
        <a-row style="margin-top:2%;width:60%">
          <a-col :span="4">
            <a-checkbox value="0" class="checkboxTitel">商品分类</a-checkbox>
          </a-col>
          <a-col :span="4">
            <a-checkbox value="1">查看</a-checkbox>
          </a-col>
          <a-col :span="4">
            <a-checkbox value="2">导出</a-checkbox>
          </a-col>
          <a-col :span="4">
            <a-checkbox value="3">新增</a-checkbox>
          </a-col>
          <a-col :span="4">
            <a-checkbox value="4">编辑</a-checkbox>
          </a-col>
          <a-col :span="4">
            <a-checkbox value="5">删除</a-checkbox>
          </a-col>
        </a-row>
        <a-row style="margin-top:2%;width:30%">
          <a-col :span="8">
            <a-checkbox value="0" class="checkboxTitel">算法识别码</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="1">查看</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="2">导出</a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-card> -->
  </div>
</template>

<script>
const orderOneOptions = [
  { label: "销售订单", value: 0 },
  { label: "查看", value: 1 },
  { label: "导出", value: 2 }
];
const defaultCheckedList = [];
export default {
  name: "RoleAdd",
  data() {
    return {
      form: this.$form.createForm(this),
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      orderOneOptions
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < orderOneOptions.length;
      this.checkAll = checkedList.length === orderOneOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? orderOneOptions : [],
        indeterminate: false,
        checkAll: e.target.checked
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.RoleAdd {
  width: 100%;
}
.checkTitle {
  margin: 0 0 0 2%;
  font-size: 1em;
}
.checkGroup {
  margin: 0 0 0 5%;
  width: 100%;
}
.hint {
  font-size: 0.9em;
  color: gray;
}
.checkboxTitel {
  font-size: 1.1em;
}
</style>
